<template>

  <div class="building">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/admin/base/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>基本信息管理</el-breadcrumb-item>
      <el-breadcrumb-item>楼宇管理</el-breadcrumb-item>
    </el-breadcrumb>
    <el-divider></el-divider>

    <el-card>
      <el-container>

        <el-header style="border: 1px solid #e2e2e2;height: 100px">

          <el-form style="width:920px;height: 70px;margin: 30px 0 0 0" v-model="formsearch" >

            <el-form-item>
              用户姓名
              <el-input placeholder="用户姓名" style="width: 300px;margin: 0 20px" v-model="formsearch.username"></el-input>
              用户性别
              <el-select v-model="formsearch.gender" style="width: 300px;margin: 0 20px">
                <el-option label="男" value="男"></el-option>
                <el-option label="女" value="女"></el-option>
              </el-select>

              <el-button icon="el-icon-search" @click="search()">搜索</el-button>

            </el-form-item>


          </el-form>




        </el-header>


        <el-main style="height: 680px;border:1px solid  #e2e2e2;margin: 10px 0 0 0">
          <el-container>

            <el-header style="padding: 0;height: 30px">

              <div style="width: 170px;padding: 0;float: left">

                <el-button type="primary" @click="dialogFormVisible = true">添加</el-button>
                <el-button type="warning" @click="deletes()">删除</el-button>

                <el-dialog title="添加用户" :visible.sync="dialogFormVisible">

                  <el-form :model="form">
                    <el-form-item label="ID" :label-width="formLabelWidth">
                      <el-input v-model="form.id" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="用户名" :label-width="formLabelWidth">
                      <el-input v-model="form.username" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="性别" :label-width="formLabelWidth">
                      <el-select v-model="form.gender">
                        <el-option label="男" value="男"></el-option>
                        <el-option label="女" value="女"></el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item label="城市" :label-width="formLabelWidth">
                      <el-input v-model="form.city" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="签名" :label-width="formLabelWidth">
                      <el-input v-model="form.autograph" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="职业" :label-width="formLabelWidth">
                      <el-input v-model="form.occupation" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="财富" :label-width="formLabelWidth">
                      <el-input v-model="form.wealth" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item :label-width="formLabelWidth" style="width:350px;display:block;margin: 0 auto">


                      <el-button @click="dialogFormVisible = false">取 消</el-button>
                      <el-button type="primary" @click="add()">确 定</el-button>

                    </el-form-item>

                  </el-form>

                </el-dialog>

              </div>

              <div style="width: 400px;padding: 0;float:right;">
                <el-tooltip content="楼宇" placement="bottom">
                <router-link to="/admin/base/floor"><el-button icon="el-icon-office-building"></el-button></router-link>
                </el-tooltip>

                <el-tooltip content="刷新" placement="bottom">
                  <el-button icon="el-icon-refresh-left" style="margin: 0 0 0 10px" @click="reFresh()"></el-button>
                </el-tooltip>

                <el-tooltip content="筛选" placement="bottom">
                  <el-popover
                      placement="bottom"
                      trigger="click">
                    <template>
                      <el-checkbox v-model="b1" style="display: block">ID</el-checkbox>
                      <el-checkbox v-model="b2" style="display: block">用户名</el-checkbox>
                      <el-checkbox v-model="b3" style="display: block">性别</el-checkbox>
                      <el-checkbox v-model="b4" style="display: block">城市</el-checkbox>
                      <el-checkbox v-model="b5" style="display: block">签名</el-checkbox>
                      <el-checkbox v-model="b6" style="display: block">职业</el-checkbox>
                      <el-checkbox v-model="b7" style="display: block">财富</el-checkbox>
                    </template>
                    <el-button slot="reference" icon="el-icon-menu" style="margin: 0 0 0 10px"></el-button>
                  </el-popover>
                </el-tooltip>


                <el-tooltip content="导出" placement="bottom">
                  <el-button icon="el-icon-folder-opened" style="margin: 0 0 0 10px"></el-button>
                </el-tooltip>
                <el-tooltip content="打印" placement="bottom">
                  <el-button icon="el-icon-printer"></el-button>
                </el-tooltip>
                <el-tooltip content="Top center" placement="bottom">
                  <el-button icon="el-icon-warning-outline"></el-button>
                </el-tooltip>

              </div>

            </el-header>

            <el-main>

              <el-table
                  v-loading="loading"
                  ref="multipleTable"
                  tooltip-effect="dark"
                  @selection-change="handleSelectionChange"
                  :data="tableData"
                  height="560"
                  style="width: 100%">

                <el-table-column
                    type="selection"
                    width="70">
                </el-table-column>
                <el-table-column
                    v-if="b1"
                    prop="id"
                    label="ID"
                    sortable
                    width="150">
                </el-table-column>
                <el-table-column
                    v-if="b2"
                    prop="username"
                    label="用户名"
                    width="150">
                </el-table-column>
                <el-table-column
                    v-if="b3"
                    prop="gender"
                    label="性别"
                    sortable
                    width="150">
                </el-table-column>
                <el-table-column
                    v-if="b4"
                    prop="city"
                    label="城市"
                    width="150">
                </el-table-column>
                <el-table-column
                    v-if="b5"
                    prop="autograph"
                    label="签名"
                    width="280">
                </el-table-column>
                <el-table-column
                    v-if="b6"
                    prop="occupation"
                    label="职业"
                    width="150">
                </el-table-column>
                <el-table-column
                    v-if="b7"
                    prop="wealth"
                    label="财富"
                    sortable
                    width="150">
                </el-table-column>
                <el-table-column
                    label="操作"
                    width="200">
                  <template slot-scope="scope">

                    <el-button type="primary" style="text-align: center" size="mini"
                               @click="selectUser(scope.row)">编辑
                    </el-button>
                    <el-popconfirm style="margin: 0 0 0 10px"
                                   title="这是一段内容确定删除吗？"
                                   @confirm="deleteRow(scope.$index,scope.row)"
                    >
                      <el-button slot="reference" type="warning" size="mini">删除</el-button>
                    </el-popconfirm>

                  </template>


                </el-table-column>

              </el-table>


              <el-dialog title="编辑用户" :visible.sync="dialogFormVisible1">

                <el-form :model="form">
                  <el-form-item label="ID" :label-width="formLabelWidth">
                    <el-input v-model="form.id" autocomplete="off" disabled></el-input>
                  </el-form-item>
                  <el-form-item label="用户名" :label-width="formLabelWidth">
                    <el-input v-model="form.username" autocomplete="off"></el-input>
                  </el-form-item>
                  <el-form-item label="性别" :label-width="formLabelWidth">
                    <el-select v-model="form.gender">
                      <el-option label="男" value="男"></el-option>
                      <el-option label="女" value="女"></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="城市" :label-width="formLabelWidth">
                    <el-input v-model="form.city" autocomplete="off"></el-input>
                  </el-form-item>
                  <el-form-item label="签名" :label-width="formLabelWidth">
                    <el-input v-model="form.autograph" autocomplete="off"></el-input>
                  </el-form-item>
                  <el-form-item label="职业" :label-width="formLabelWidth">
                    <el-input v-model="form.occupation" autocomplete="off"></el-input>
                  </el-form-item>
                  <el-form-item label="财富" :label-width="formLabelWidth">
                    <el-input v-model="form.wealth" autocomplete="off" placeholder="请输入金额"></el-input>
                  </el-form-item>
                  <el-form-item :label-width="formLabelWidth" style="width:350px;display:block;margin: 0 auto">


                    <el-button @click="dialogFormVisible1 = false">取 消</el-button>
                    <el-button type="primary" @click="edit()">确 定</el-button>

                  </el-form-item>

                </el-form>

              </el-dialog>


            </el-main>

          </el-container>


        </el-main>


      </el-container>
    </el-card>

  </div>


</template>

<script>


export default {

  data() {
    return {
      loading:true,

      checked: true,
      b1:true,
      b2:true,
      b3:true,
      b4:true,
      b5:true,
      b6:true,
      b7:true,


      multipleSelection: [],

      dialogTableVisible: false,
      dialogFormVisible: false,
      formLabelWidth: '120px',

      dialogFormVisible1: false,
      dialogTableVisible1: false,
      formLabelWidth1: '120px',

      formsearch: {
        username: "",
        gender: "",
      },

      form: {
        id: '',
        username: '',
        gender: '',
        city: "",
        autograph: "",
        occupation: "",
        wealth: "",
      },

      tableData: [],

    }
  },
  created: function () {
    this.selectel();
  },
  methods: {

    reFresh(){
      this.selectel();
    },
    selectel() {
      this.axios.post("http://localhost:8080/building/search/select/list").then((response) => {
        this.loading=false
        this.tableData = response.data;
      })
    },

    search() {
      this.axios.post("http://localhost:8080/building/search/select", this.formsearch).then((response) => {
        this.tableData = response.data;
      })
    },
    add() {
      this.dialogFormVisible = false
      this.$message.success("添加用户成功")
      this.axios.post("http://localhost:8080/building/add/insert", this.form).then((response) => {
        this.selectel();
      })

    },
    selectUser(row) {
      this.dialogFormVisible1 = true
      this.axios.post("http://localhost:8080/building/edit/select", row).then((response) => {
        this.form = response.data;
      })
    },
    edit() {
      this.dialogFormVisible1 = false
      this.axios.post("http://localhost:8080/building/edit/update", this.form).then((response) => {
        this.$message.success("编辑用户成功")
        this.selectel();
      })

    },
    deleteRow(index, row) {
      this.axios.post("http://localhost:8080/building/user/delete", row).then((response) => {
        this.$message.success("删除用户成功")
        this.selectel();
      })

    },
    deletes() {
      this.axios.post("http://localhost:8080/building/users/delete", this.multipleSelection).then((response) => {
        if (response.data == 1) {
          this.$message.success("删除用户成功")
        } else {
        }
        this.selectel();
      })
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    }
  }

}
</script>
